<template>
    <div class="edu-page-warp">
        <div class="edu-page-title mg-top">学生信息激活说明设置</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-row class="border-bottom" style="height:56px;">
                <el-col :span="18">
                    <div class="empty-box"/>
                </el-col>
                <el-col :span="6">
                    <div class="float-right">
                        <el-button type="primary" @click="addItem()">新增</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table :data="data">
                <el-table-column type="selection" stripe/>
                <el-table-column label="编号" type="index" :index="indexMethod"></el-table-column>
                <el-table-column label="培养层次">
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n }}</template>
                </el-table-column>
                <el-table-column label="培养类别">
                    <template slot-scope="scope">{{ scope.row.trainingTypeI18n}}</template>
                </el-table-column>
                <el-table-column label="是否国际生">
                    <template slot-scope="scope">{{scope.row.studentAbroad | yesOrNo }}</template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="editItem(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click="deleteItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
            v-if="dialogConfig.showDialog"
            :title.sync="dialogConfig.title"
            :visible.sync="dialogConfig.showDialog"
            width="60%"
            :before-close="handleDialogClose"
        >
            <el-form
                :model="dialogConfig.formData"
                :inline="true"
                :rules="dialogConfig.rules"
                ref="addForm"
            >
                <el-row :gutter="20" style="height: 50px;">
                    <el-col :span="8">
                        <el-form-item
                            label="培养层次："
                            :label-width="dialogConfig.formLabelWidth"
                            prop="trainingLevel"
                        >
                            <el-select v-model="dialogConfig.formData.trainingLevel">
                                <el-option
                                    v-for="item in dialogConfig.options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                            label="培养类别："
                            :label-width="dialogConfig.formLabelWidth"
                            prop="trainingType"
                        >
                            <el-select v-model="dialogConfig.formData.trainingType">
                                <el-option
                                    v-for="item in dialogConfig.options.trainingType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                            label="是否国际学生："
                            :label-width="dialogConfig.formLabelWidth"
                            prop="studentAbroad"
                        >
                            <el-select v-model="dialogConfig.formData.studentAbroad">
                                <el-option label="是" :value="true"/>
                                <el-option label="否" :value="false"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="height: 50px;">
                    <el-col :span="24">
                        <el-form-item label="说明：" :label-width="dialogConfig.formLabelWidth">
                            <el-input
                                style="width: calc(300% - 100px);"
                                v-model="dialogConfig.formData.description"
                                placeholder="激活说明设置，请务必统一填写相应信息，才能访问其他业务。"
                                type="textarea"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog(dialogConfig)">取 消</el-button>
                <el-button type="primary" @click="handlerAddItem">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :title.sync="deleteDialog.title"
            :visible.sync="deleteDialog.showDialog"
            width="30%"
        >
            <span>确认删除该数据？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog(deleteDialog)">取 消</el-button>
                <el-button type="primary" @click="handlerDeleteItem">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import * as API from "common/src/api/studentAcitivity";
import { queryDic } from "common/src/api/dictionary";
import { yesOrNo } from "common/src/filters/commonFilter";
export default {
    data() {
        return {
            data: [],
            totalCount: 0,
            queryForm: {
                pageSize_: 20,
                pageNum_: 1
            },
            dialogConfig: {
                title: "激活说明设置",
                showDialog: false,
                formLabelWidth: "100px",
                formData: {
                    trainingLevel: "",
                    trainingType: "",
                    isStudentAbroad: "",
                    description: ""
                },
                rules: {
                    trainingLevel: [
                        {
                            required: true,
                            message: "请选择培养层次",
                            trigger: "blur"
                        }
                    ],
                    trainingType: [
                        {
                            required: true,
                            message: "请选择培养类别",
                            trigger: "blur"
                        }
                    ],
                    studentAbroad: [
                        {
                            required: true,
                            message: "请选择是否国际生",
                            trigger: "blur"
                        }
                    ]
                },
                options: {
                    trainingLevel: [],
                    studentCategory: []
                }
            },
            deleteDialog: {
                title: "确认删除",
                showDialog: false,
                activationCode: ""
            }
        };
    },
    mounted() {
        this.initData();
        this.initOptions();
    },
    methods: {
        initData() {
            API.getActivityExplainList(this.queryForm).then(response => {
                let { code, data } = response;
                if (code === 200) {
                    this.data = data;
                }
            });
        },
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC", "X_PYLB"]
            };
            queryDic(data).then(res => {
                let {
                    code,
                    data: { X_PYCC, X_PYLB }
                } = res;
                if (code === 200) {
                    this.dialogConfig.options.trainingLevel = Object.keys(
                        X_PYCC
                    ).map(key => ({ label: X_PYCC[key], value: key }));
                    this.dialogConfig.options.trainingType = Object.keys(
                        X_PYLB
                    ).map(key => ({ label: X_PYLB[key], value: key }));
                }
            });
        },
        indexMethod(value) {
            return value + 1;
        },
        addItem() {
            this.dialogConfig.formData = {
                trainingLevel: "",
                trainingType: "",
                studentAbroad: "",
                description: ""
            };
            this.openDialog(this.dialogConfig);
        },
        editItem(row) {
            let {
                trainingLevel,
                trainingType,
                studentAbroad,
                description,
                activationCode
            } = row;
            this.dialogConfig.formData = {
                trainingLevel,
                trainingType,
                studentAbroad,
                description,
                activationCode
            };
            this.openDialog(this.dialogConfig);
        },
        deleteItem(row) {
            this.deleteDialog.activationCode = row.activationCode;
            this.deleteDialog.showDialog = true;
        },
        handlerDeleteItem() {
            API.deleteActivityExplain(this.deleteDialog.activationCode).then(
                response => {
                    if (response.code === 200) {
                        this.closeDialog(this.deleteDialog);
                        this.initData();
                    }
                }
            );
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.initData();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.initData();
        },
        closeDialog(dialog) {
            dialog.showDialog = false;
        },
        openDialog(dialog) {
            dialog.showDialog = true;
        },
        handlerAddItem() {
            this.$refs["addForm"].validate(valid => {
                if (valid) {
                    let promise = null;
                    if (this.dialogConfig.formData.activationCode) {
                        promise = API.updateActivityExplain(
                            this.dialogConfig.formData
                        );
                    } else {
                        promise = API.addActivityExplainList(
                            this.dialogConfig.formData
                        );
                    }
                    promise.then(response => {
                        if (response.code === 200) {
                            this.closeDialog(this.dialogConfig);
                            this.initData();
                        }
                    });
                }
            });
        }
    },
    filters: {
        yesOrNo
    }
};
</script>

